<template>
  <div>
    <img :src="itemObj.sku_img_url" class="itemimg" />
    {{ itemObj.sku_name }}
    价格：{{ price / 100 }}
    <div class="cartbtn" @click="addShop">添加到购物车</div>
  </div>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      itemObj: {},
      price: 0,
      item_id: 0,
    };
  },
  created() {
    var { id, price } = this.$route.params;
    this.price = price;
    this.item_id = id;
    this.$axios.get("./json/item_" + id + ".json").then((res) => {
      this.itemObj = res.data.data.reviews[0];
    });
  },
  methods: {
    // 添加购物车
    addShop() {
      //加到购物车中的属性：id name price num img
      let item = {
        item_id: this.item_id,
        item_name: this.itemObj.sku_name,
        price: this.price,
        num: 1,
        imgsrc: this.itemObj.sku_img_url,
      };
      // 调用vuex中mutation
      // this.$store.commit("ADD_CART", item);

      // 调用action
      this.$store.dispatch("ADD_CART_AC", item);
    },
  },
};
</script>

<style scoped>
.itemimg {
  width: 100%;
}
.cartbtn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  width: 100%;
  background: orangered;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}
</style>
